<template>
    <div class="progress">
        <div class="progress-left">
            <img src="@/assets/images/visual/right-b-icon.png" alt="">
        </div>
        <div class="progress-right">
            <div class="progress-right-top">
                <div class="city">{{config.city}}</div>
                <div class="person">{{formatter(config.number)}}人</div>
            </div>
            <div :id="id" style="width: 100%;height:25px;"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'GlowingDotsProgressBar',
    data() {
        return {
            option: {
                
            }
        }
    },
    props: {
        config: {
            type: Object,
        },
        id: {
            type: String,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        formatter(number) {
            const numbers = number.toString().split('').reverse()
            const segs = []

            while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

            return segs.join(',').split('').reverse().join('')
        },
        init() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById(this.id));
            // 绘制图表
            myChart.setOption({
                backgroundColor: 'transparent', // 设置透明背景
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    max: this.config.max,
                },
                yAxis: {
                    type: 'category',
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            opacity: 0.7,
                            barBorderRadius: 4,
                            color: (params) => {
                                return {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: this.config.color[0] || "rgba(255, 197, 100, 1)",
                                        },
                                        {
                                            offset: 1,
                                            color: this.config.color[1] || "rgba(255, 159, 57, 1)",
                                        },
                                    ],
                                };
                            },
                        },
                        label: {
                            show: true,
                            formatter: '',
                            backgroundColor: this.config.color[2] || 'rgba(255, 226, 151, 1)',
                            width: 10,
                            height: 10,
                            position: 'right',
                            offset: [-7, 0],
                            borderWidth: 5,
                            borderColor: this.config.color[3] || 'rgba(255, 204, 70, .5)',
                            borderRadius: 5,
                            shadowColor: this.config.color[4] || 'rgba(255, 204, 70, .2)',
                            shadowBlur: 50
                        },
                        showBackground: true,
                        silent: true,
                        barWidth: 5,
                        barGap: '-100%', // Make series be overlap
                        data: [this.config.data],
                    },
                ],
            });
        }
    }
};
</script>

<style lang="less" scoped>
#charts {
    width: 100%;
    height: 100%;
}
.progress {
    display: flex;
    align-items: end;
    .progress-left {
        width: 25px;
        height: 10px;
        margin-bottom: 15px;
        margin-right: 10px;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .progress-right {
        flex: 1;
        .progress-right-top {
            display: flex;
            justify-content: space-between;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            line-height: 20px;
            font-size: 14px;
            .city {
                color: #BFDBEF;
            }
            .person {
                color: #E2F3FF;
            }
        }
    }
}
</style>